<template>
  <div>
    <div class="box-register">
      <!-- 输入账号 -->
      <p v-if="!state.state_a" class="register-p">账号:</p>
      <p v-if="state.state_a" class="register-pto">账号:</p>
      <el-input v-model="userdata.userName" placeholder="请输入账号"></el-input>
      <!-- 输入密码 -->
      <p v-if="!state.state_b" class="register-p">密码:</p>
      <p v-if="state.state_b" class="register-pto">密码:</p>
      <el-input
        v-model="userdata.password"
        type="password"
        placeholder="请输入密码"
      ></el-input>
      <!-- 提示 -->
      <p v-if="state.state_s != 2" class="register-p">重复密码:</p>
      <p v-if="state.state_s == 2" class="register-pto">重复密码:</p>
      <el-input
        @blur="repeat"
        v-model="password"
        type="password"
        placeholder="请输入密码2"
      ></el-input>
      <p v-if="state.state_s == 0" class="judge">请输入密码</p>
      <p v-if="state.state_s == 1" class="judge">两次输入密码不一致</p>

      <el-alert :title="msg" type="error"> </el-alert>
      <p></p>
      <el-button
        type="primary"
        v-if="userdata.userName == '' || state.state_s != 2"
        disabled
        >注册</el-button
      >
      <el-button
        v-if="userdata.userName != '' && state.state_s == 2"
        type="primary"
        @click="account"
        >注册</el-button
      >

      <el-button type="primary" @click="backOff">注册</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "",
      state: {
        state_a: false,
        state_b: false,
        state_s: -1,
      },
      userdata: {
        //用户数据合集
        userName: "", //账号
        password: "", //密码
      },
      password: "", //密码重复
    };
  },
  methods: {
    repeat() {
      //
      if (
        this.userdata.password != "" ||
        this.userdata.password == this.password
      ) {
        this.state.state_s = 2;
      }
      if (this.userdata.password == "") {
        this.state.state_s = 0;
      }
      if (this.userdata.password != this.password) {
        this.state.state_s = 1;
      }
    },
    backOff() {
      this.$router.go(-1);
    },
    account() {
      this.$axios.post("/api/users/register", this.userdata).then((rem) => {
        console.log(rem);

        if (rem.code != "001") {
          this.msg = rem.msg;
        }
        let { code: dack, msg: judgeelect } = rem;
        if (dack == "001") {
          this.$router.go(-1);
          this.$notify({
            title: "成功",
            message: judgeelect,
            type: "success",
          });
        }
      });
    },
  },
  watch: {
    userdata: {
      handler() {
        // alert();
        let user = this.userdata;
        let state = this.state;
        user.userName != "" ? (state.state_a = true) : (state.state_a = false);

        user.password != "" ? (state.state_b = true) : (state.state_b = false);
        // user.password == "" ? (state.state_b = false) : (state.state_b = true);
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
.box-register {
  width: 20%;
  margin: auto;
  height: 300px;
  margin-top: 12%;
  margin-bottom: 20%;
  padding: 6%;
  background: #f4f5f6;
}
.register-p {
  margin: 0;
  margin-bottom: 3%;
  color: red;
}
.register-pto {
  margin: 0;
  margin-bottom: 3%;
  color: green;
}
.judge {
  text-align: center;
  margin: 0;
  color: yellow;
}
.judges {
  text-align: center;
  margin: 0;
  color: green;
}
</style>